<template>
  <div class="container">
    <Breadcrumb :pathContent="content" />
    <div class="easy-content">
      <el-form ref="ruleForm"
        label-width="100px"
        :model="formData"
        :rules="rules">
        <el-row>
          <h1 class="title">客户信息</h1>
          <el-col :span="12">
            <el-form-item label-width="100px"
              label="商家"
              prop="suppliersId">
              <el-select v-model="formData.suppliersId"
                @change="selected_suppliers"
                :disabled="isOrder">
                <div v-for="item in suppliersAll"
                  :key="item.id">
                  <el-option :label="item.suppliersCompany"
                    :value="item.id"></el-option>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="100px"
              label="分销商"
              prop="source">
              <el-select v-model="formData.source"
                :disabled="isOrder">
                <div v-for="item in distributionAll"
                  :key="item.id">
                  <el-option :label="item.sourcel"
                    :value="item.id"></el-option>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <h1 class="title">预订信息</h1>
          <el-col :span="12">
            <el-form-item label-width="100px"
              label="城市"
              prop="city">
              <el-cascader :options="cityList"
                :props="{ value: 'cityId', label: 'cityName', children: 'cityList' }"
                @change="handleCascader"
                :disabled="!cityList.length || isOrder"
                v-model="formData.city"
                format="yyyy 年 MM 月 dd 日">
              </el-cascader>
            </el-form-item>
            <el-form-item :required="true"
              label-width="100px"
              label="物理房型"
              prop="bookingRoom">
              <el-select v-model="formData.bookingRoom"
                style="height:34px"
                :disabled="!roomAll.length || isOrder"
                @change="selected_room">
                <div v-for="item in roomAll"
                  :key="item.id">
                  <el-option :label="item.roomName"
                    :value="item.id"></el-option>
                </div>
              </el-select>
            </el-form-item>
            <!-- <el-form-item  label-width="100px" label="入住日期" prop="liveTime">
                  <el-date-picker
                    v-model="formData.liveTime"
                    type="date"
                    placeholder="请选择"
                     @change="handleLiveTime"
                     :disabled="isOrder"
                     value-format="yyyy-MM-dd"
                      format="yyyy-MM-dd"
                    >
                  </el-date-picker>
               </el-form-item> -->
            <el-form-item label="入离时间"
              prop="startEndTime">
              <el-date-picker v-model="formData.startEndTime"
                style="width:85%;height:34px;"
                type="daterange"
                size="small"
                :disabled="isOrder"
                range-separator="至"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                start-placeholder="入住日期"
                end-placeholder="离店日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label-width="100px"
              label="预订间数"
              prop="bookingRoomsNum">
              <el-input v-model="formData.bookingRoomsNum"
                type="text"
                placeholder="请输入预订间数"
                :disabled="isOrder"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :required="true"
              label-width="100px"
              label="酒店名称"
              prop="bookingHotel">
              <el-select :disabled="!hotelAll.length || isOrder"
                v-model="formData.bookingHotel"
                @change="selected_hotel">
                <el-option v-for="item in hotelAll"
                  :key="item.id"
                  :label="item.hotelName"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :required="true"
              label-width="100px"
              label="售卖房型"
              prop="bookingSellingRoom">
              <el-select v-model="formData.bookingSellingRoom"
                placeholder="请输入售卖房型"
                :disabled="!saleRoomAll.length || isOrder">
                <div v-for="item in saleRoomAll"
                  :key="item.id">
                  <el-option :label="item.saleRoomName"
                    :value="item.id"></el-option>
                </div>
              </el-select>
            </el-form-item>
            <!-- <el-form-item  label-width="100px" label="离店日期" prop="leaveTime">
                <el-date-picker
                  v-model="formData.leaveTime"
                  type="date"
                  @change="handleLeaveTime"
                  placeholder="请选择"
                  :disabled="isOrder"
                  value-format="yyyy-MM-dd"
                   format="yyyy-MM-dd"
                  >
                </el-date-picker>
            </el-form-item> -->
          </el-col>
        </el-row>
        <el-row>
          <h1 class="title">入住信息</h1>
          <el-col :span="12">
            <el-form-item label-width="100px"
              label="入住人"
              prop="stayPerson">
              <el-input v-model="formData.stayPerson"
                type="text"
                placeholder="请输入"
                :disabled="isOrder"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="100px"
              label="联系人电话">
              <el-input v-model="formData.stayMobile"
                type="text"
                placeholder="请输入"
                :disabled="isOrder"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button type="primary"
          size="small"
          @click="submitForm('ruleForm')"
          style="margin-top:10px;"
          v-if="!isOrder">生成价格单第一步</el-button>
        <el-button type="primary"
          size="small"
          @click=" isOrder = false "
          style="margin-top:10px;"
          v-if="isOrder">重新生成订单</el-button>
      </el-form>
      <div style="padding-top:25px"
        v-if="isOrder"
        class="clearfix">
        <h1 class="title fl">入住信息</h1>
        <div class="priceList fl">
          <p class="totle-info">
            <span>售卖房价：
              <span class="price">￥{{totlePrice}}</span>
            </span>
            <span>{{orderPrices.roomNight}} 总{{orderPrices.roomTotal}}间</span>
          </p>
          <span class="allHandle"
            @click="editAllPrice"
            v-if="orderPricesAll.length > 1 ">批量改价
            <i class="fa fa-pencil"></i>
          </span>
          <ul class="price-list-day">
            <li v-for="(item,index) in orderPricesAll"
              :key="item.id"
              @click="editPrice(index)">
              <div>
                <span>{{item.date}}</span>
                <span>
                  <span>售 {{item.salePrice}} </span>
                </span>
                <i class="fa fa-pencil"></i>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <el-button type="primary"
        size="small"
        @click="addOrderSure"
        style="margin-top:10px;"
        v-if="isOrder">完成订单</el-button>
    </div>
    <!-- 修改房价弹窗 -->
    <el-dialog title="修改房价"
      :visible.sync="dialogVisible"
      width="30%"
      @close="restData">
      <div class="dialog-content">
        <div>
          <span class="label"
            style="margin-right:15px">日期: </span>
          {{editDate}}
        </div>
        <div>
          <span class="label"
            style="margin-right:15px">售价: </span>
          <el-input placeholder="请输入售价"
            v-model="salePrice"
            style="width:200px"></el-input>
        </div>
      </div>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="editAllSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addOrder,
  getAddOrderInfo,
  getMoney,
  roomState,
  roomNum,
  getOrderBaseInfo,
  getPrices
} from "../../public/js/order";
const Breadcrumb = () => import("@/components/common/Breadcrumb");

export default {
  name: "orderForm",
  components: {
    Breadcrumb
  },
  data() {
    return {
      content: {
        firstTitle: "订单",
        secondTitle: "新增订单",
        type: "close"
      },
      orderInfo: null,
      form: {
        state: 0
      },
      formData: {
        timestamp: new Date().getTime(),
        city: [],
        source: "",
        suppliersId: "",
        bookingHotel: "",
        bookingRoom: "",
        bookingSellingRoom: "",
        bookingRoomsNum: "",
        stayPerson: "",
        stayMobile: "",
        orderPricesList: [],
        sellPrice: 0,
        floorPrice: 0,
        startEndTime: []
      },
      distributionAll: [],
      suppliersAll: [],
      hotelAll: [],
      roomAll: [],
      saleRoomAll: [],
      cityList: [],
      province: "",
      city: "",
      rules: {
        suppliersId: [{ required: true, message: "请选择供应商" }],
        source: [{ required: true, message: "请选择分销商" }],
        city: [{ required: true, message: "请选择城市" }],
        bookingHotel: [{ required: true, message: "请选择酒店名称" }],
        bookingRoom: [{ required: true, message: "请选择物理房型" }],
        bookingSellingRoom: [{ required: true, message: "请选择售卖房型" }],
        bookingRoomsNum: [{ required: true, message: "请填写入预订间数" }],
        startEndTime: [
          {
            type: "array",
            required: true,
            message: "请选择入离时间",
            trigger: "change"
          }
        ],
        stayPerson: [{ required: true, message: "请填写入住人" }]
      },
      isOrder: false,
      orderPrices: "",
      dialogVisible: false,
      editDate: "",
      salePrice: "",
      orderPricesAll: [],
      totlePrice: 0,
      isAll: true,
      indexPrice: "",
      sellPrice: ""
    };
  },
  created() {
    this.getBaseInfo();
  },
  mounted() {},
  watch: {
    orderPricesAll: {
      handler(val) {
        this.totlePrice = 0;
        val.forEach(item => {
          this.totlePrice += parseFloat(item.salePrice);
        });
        this.formData.orderPricesList = val;
        this.formData.sellPrice = this.totlePrice;
      },
      deep: true
    }
  },
  methods: {
    getBaseInfo() {
      getOrderBaseInfo({
        suppliersId: this.formData.suppliersId,
        province: this.province,
        city: this.city,
        hotelId: this.formData.bookingHotel,
        roomId: this.formData.bookingRoom
      }).then(res => {
        if (!res.data.errCode) {
          this.suppliersAll = res.data.suppliersAll;
          this.distributionAll = res.data.distributionAll;
          this.hotelAll = res.data.hotelAll ? res.data.hotelAll : [];
          this.roomAll = res.data.roomAll ? res.data.roomAll : [];
          this.saleRoomAll = res.data.saleRoomAll ? res.data.saleRoomAll : [];
          this.cityList = res.data.cityList ? res.data.cityList : [];
        }
      });
    },
    selected_suppliers(val) {
      this.formData.bookingHotel = "";
      this.formData.bookingRoom = "";
      this.formData.bookingSellingRoom = "";
      this.province = "";
      this.city = "";
      this.getBaseInfo();
    },
    handleCascader(val) {
      if (val.length > 1) {
        this.province = val[0];
        this.city = val[1];
        this.formData.bookingHotel = "";
        this.hotelAll = [];
      }
      this.getBaseInfo();
    },
    selected_hotel(val) {
      this.formData.bookingRoom = "";
      this.formData.bookingSellingRoom = "";
      this.getBaseInfo();
    },
    selected_room() {
      this.formData.bookingSellingRoom = "";
      this.getBaseInfo();
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.isOrder = true;
          this.getDayPrice();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    back() {
      this.$router.go(-1);
    },
    handleLiveTime(liveTime) {
      if (this.formData.leaveTime && this.formData.leaveTime < liveTime) {
        this.$message.error("离店时间不能小于入住时间");
        this.formData.liveTime = "";
      }
    },
    handleLeaveTime(leaveTime) {
      if (this.formData.liveTime && this.formData.liveTime > leaveTime) {
        this.$message.error("离店时间不能小于入住时间");
        this.formData.leaveTime = "";
      }
    },
    getDayPrice() {
      getPrices({
        saleRoomId: this.formData.bookingSellingRoom,
        roomsNum: this.formData.bookingRoomsNum,
        startTime: this.formData.startEndTime[0],
        endTime: this.formData.startEndTime[1]
      }).then(res => {
        if (!res.data.errCode) {
          this.orderPrices = res.data;
          this.orderPricesAll = res.data.orderPricesAll;
        }
      });
    },
    //批量改价
    editAllPrice() {
      this.isAll = true;
      this.dialogVisible = true;
      this.editDate =
        this.orderPricesAll[0].date +
        "至" +
        this.orderPricesAll[this.orderPricesAll.length - 1].date;
    },
    // 单个改价
    editPrice(index) {
      this.dialogVisible = true;
      this.indexPrice = index;
      this.isAll = false;
      this.orderPricesAll.forEach((item, i) => {
        if (i === index) {
          this.editDate = item.date;
          this.salePrice = item.salePrice;
        }
      });
    },
    editAllSure() {
      if (!this.salePrice) {
        this.$message.error("请输入售价");
      } else {
        if (this.isAll) {
          this.orderPricesAll.forEach(item => {
            item.salePrice = this.salePrice;
          });
        } else {
          this.orderPricesAll.forEach((item, i) => {
            if (i === this.indexPrice) {
              item.salePrice = this.salePrice;
            }
          });
        }
        this.dialogVisible = false;
      }
    },
    restData() {
      this.salePrice = "";
    },
    // 新增订单第二步
    addOrderSure() {
      console.log("formData", this.formData);
      this.formData.timestamp = new Date().getTime();
      addOrder(this.formData).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "新增订单成功",
            type: "success"
          });
          this.back();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 15px;
}
.el-col-10 {
  width: 43.5%;
}
.container {
  .el-select,
  .el-input {
    width: 85%;
  }
  .el-textarea {
    width: 85%;
  }
  .el-cascader {
    width: 85%;
  }
  .action {
    bottom: 0;
    margin-top: 20px;
    padding: 20px 30px;
    box-shadow: 0 -5px 2px #e6ebf5;
    text-align: left;
    position: fixed;
    width: 85.4%;
    background: #fff;
  }
  .title {
    color: #6d2377;
    font-size: 16px;
    padding-bottom: 20px;
  }
  .priceList {
    padding-left: 40px;
    .totle-info {
      padding-bottom: 30px;
      span {
        margin-right: 15px;
      }
    }
    .allHandle {
      display: inline-block;
      font-size: 14px;
      padding-bottom: 20px;
      color: #6d2377;
      cursor: pointer;
    }
    .price-list-day {
      li {
        float: left;
        margin-right: 15px;
        border: 1px solid #6d2377;
        border-radius: 3px;
        padding: 8px 10px;
        cursor: pointer;
        i {
          color: #6d2377;
        }
        & > div > span {
          margin-right: 5px;
          display: inline-block;
        }
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
